<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询学生</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: #393D49;
            height: 60px;
            padding: 0 20px;
        }

        .header .logo {
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
        }

        .content {
            flex: 1;
        }

        .content>.left {
            width: 200px;
            background: #393D49;
        }

        .content>.right {
            flex: 1;
            padding: 10px;
        }

        .pages {
            margin: 0px auto;
        }

        .search {
            margin-top: 10px;
        }

        .mask {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 0;
            left: 0;
        }

        .show_ui {
            width: 500px;
            height: 400px;
            padding: 20px;
        }


        .show_table,.show_result {
            width: 90%;
            margin: 10px auto;
        }
        .show_result td,.show_result th{
            text-align: center;
            padding: 5px;
        }

        .show_table tr td:first-child {
            text-align: right;
            width: 80px;
        }

        .show_table tr td:last-child {
            text-align: left;
        }

        .show_table td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>
    <div class="search">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">请输入姓名：</label>
            <div class="layui-input-inline">
                <input id="studentName" type="text" name="" placeholder="请输入搜索内容" class="layui-input">
            </div>
            <button id="search" type="button" class="layui-btn">搜索</button>
        </div>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col>
            <col width="100">
            <col width="200">
            <col width="100">
            <col width="350">
        </colgroup>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="flex j-c">
        <div id="pages"></div>
    </div>
    <script id="temp4" type="text/html">
        <table class="show_result">
            <tr>
                <th>课程</th>
                <th>成绩</th>
                <th>日期</th>
            </tr>
            {{# layui.each(d, function(index, item){ }}
            <tr>
                <td>{{item.Subject.SubjectName}}</td>
                <td>{{item.StudentResult}}</td>
                <td>{{item.ExamDate}}</td>
            </tr>
            {{#  }); }}
        </table>
    </script>
    <script id="temp3" type="text/html">
        <table class="show_table">
            <tr>
                <td>学号：</td>
                <td><input readonly id="StudentNo" value="{{d.StudentNo}}"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input id="LoginPwd" value="{{d.LoginPwd}}"></td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input id="StudentName" value="{{d.StudentName}}"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input name="Sex" value="M" type="radio" {{d.Sex==='M' ? 'checked' : ''}}>男
                    <input name="Sex" value="F" type="radio" {{d.Sex==='F' ? 'checked' : ''}}>女
                </td>
            </tr>
            <tr>
                <td>年级：</td>
                <td>
                    <select id="GradeId">
                        {{# layui.each(d.GradeList, function(index, item){ }}
                        <option value="{{item.GradeId}}" {{d.GradeId===item.GradeId ? 'selected' : ''}}>{{item.GradeName}}</option>
                        {{#  }); }}
                    </select>
                </td>
            </tr>
            <tr>
                <td>生日：</td>
                <td><input id="BornDate" type="date" value="{{d.BornDate}}"></td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input id="Phone" value="{{d.Phone}}"></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input id="Email" value="{{d.Email}}"></td>
            </tr>
            <tr>
                <td>身份证：</td>
                <td><input id="IdentityCard" value="{{d.IdentityCard}}"></td>
            </tr>
            <tr>
                <td>地址：</td>
                <td><textarea id="Address" cols="42" rows="4">{{d.Address}}</textarea></td>
            </tr>
        </table>
    </script>
    <script id="temp2" type="text/html">
        <table class="show_table">
            <tr>
                <td>学号：</td>
                <td>{{d.StudentNo}}</td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td>{{d.StudentName}}</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>{{d.Sex==='M'?'男':'女'}}</td>
            </tr>
            <tr>
                <td>年级：</td>
                <td>{{d.Grade.GradeName}}</td>
            </tr>
            <tr>
                <td>生日：</td>
                <td>{{d.BornDate}}</td>
            </tr>
            <tr>
                <td>电话：</td>
                <td>{{d.Phone}}</td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>{{d.Email}}</td>
            </tr>
            <tr>
                <td>身份证：</td>
                <td>{{d.IdentityCard}}</td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>{{d.Address}}</td>
            </tr>
        </table>
    </script>
    <script id="temp" type="text/html">
        {{# layui.each(d.data, function(index, item){ }}
        <tr>
            <td class="id">{{item.StudentNo}}</td>
            <td>{{item.StudentName}}</td>
            <td>{{item.Sex==='M'?'男':'女'}}</td>
            <td>{{item.BornDate}}</td>
            <td>{{item.Grade.GradeName}}</td>
            <td>
                <button data-no="{{item.StudentNo}}" id="show_btn"  type="button" class="layui-btn layui-btn-sm">
                    <i class="layui-icon layui-icon-share"></i>查看</button>
                <button data-no="{{item.StudentNo}}" id="show_result_btn"  type="button" class="layui-btn layui-btn-normal layui-btn-sm">
                    <i class="layui-icon layui-icon-share"></i>查看成绩</button>
                <button data-no="{{item.StudentNo}}" id="edit_btn" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                    <i class="layui-icon layui-icon-edit"></i>编辑</button>
                <button data-no="{{item.StudentNo}}" id="del_btn" type="button" class="layui-btn layui-btn-danger layui-btn-sm">
                    <i class="layui-icon layui-icon-delete"></i>删除</button>
            </td>
        </tr>
        {{#  }); }}
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'laypage', 'laytpl', 'layer'], function () {
            var layer = layui.layer         //引入基础模块
            var laytpl = layui.laytpl;      //引入模板引擎
            var element = layui.element;    //引入导入模块
            var laypage = layui.laypage;    //引入分页模块

            let pageIndex = 1    //当前页
            let pageSize = 6     //每页数量

            //显示登录用户的名称
            $("#loginId").text($.cookie('loginId'))

            //退出
            $("#exit").click(function () {
                // $.removeCookie('loginId')    //清除cookie里面的登录用户的名称
                location.href = 'login.html'
            })

             //查看成绩按钮点击事件
             $('tbody').on('click', '#show_result_btn', function () {
                //获取学号
                let studentNo = $(this).data("no")
                $.get('http://www.bingjs.com:81/Result/GetResultsByStudentNo', { studentNo },
                data=>{
                    data.forEach(r => r.ExamDate = moment(new Date(r.ExamDate)).format("YYYY-MM-DD hh:mm:ss"))
                    // 渲染模版
                    laytpl($('#temp4').html()).render(data, function (html) {
                         //显示查看
                         layer.open({
                                title: '学生成绩',
                                type: 1,
                                skin: 'show_ui', //样式类名
                                // maxWidth: 800,
                                // maxHeight: 400,
                                area: ['500px', '300px'],
                                closeBtn: 1, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                content: html,
                        })
                    })
                })
             })

            //年级列表
            let gradeList = ""
            $.get('http://www.bingjs.com:81/Grade/GetAll', data => {
                data.unshift({ GradeId: 0, GradeName: '请选择年级' })
                gradeList = data
            })

            //编辑按钮点击事件
            $('tbody').on('click', '#edit_btn', function () {
                //获取学号
                let studentNo = $(this).data("no")
                $.get('http://www.bingjs.com:81/Student/GetStudentByNo', { studentNo },
                    data => {
                        data.GradeList = gradeList
                        data.BornDate = moment(new Date(data.BornDate)).format("YYYY-MM-DD")
                        // 渲染模版
                        laytpl($('#temp3').html()).render(data, function (html) {
                            // $('#show').html(html)
                            //显示查看
                            layer.open({
                                title: '修改学生',
                                type: 1,
                                skin: 'show_ui', //样式类名
                                // maxWidth: 800,
                                // maxHeight: 400,
                                area: ['500px', '480px'],
                                closeBtn: 1, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                content: html,
                                btn: ['确定', '取消'], //可以无限个按钮
                                //关闭后的回调
                                cancel: function (index, layero) {
                                    $('#show').html('')
                                    layer.close(index);
                                },
                                //确定后的回调
                                yes: function (index, layero) {
                                    let studentNo = $("#StudentNo").val()
                                    let loginPwd = $("#LoginPwd").val()
                                    let studentName = $('#StudentName').val()
                                    let sex = $('input[type=radio]:checked').val()
                                    let gradeId = $('#GradeId').val()
                                    let phone = $('#Phone').val()
                                    let email = $('#Email').val()
                                    let bornDate = $('#BornDate').val()
                                    let address = $('#Address').val()
                                    let identityCard = $('#IdentityCard').val()
                                    //调用修改接口
                                    $.post('http://www.bingjs.com:81/Student/Update', {
                                        studentNo, loginPwd, studentName, sex,
                                        gradeId, phone, email, bornDate, address, identityCard
                                    }, res => {
                                        if (res) {
                                            layer.msg('修改成功！')
                                            getData(pageIndex, pageSize)    //调用获取数据的方法
                                        } else {
                                            layer.msg('修改失败！')
                                        }
                                    })
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                }
                            });
                        })
                    })
            })

            //查看按钮点击事件
            $('tbody').on('click', '#show_btn', function () {
                //获取学号
                let studentNo = $(this).data("no")
                $.get('http://www.bingjs.com:81/Student/GetStudentByNo', { studentNo },
                    data => {
                        data.BornDate = moment(new Date(data.BornDate)).format("YYYY-MM-DD")
                        // 渲染模版
                        laytpl($('#temp2').html()).render(data, function (html) {
                            //显示查看
                            layer.open({
                                title: '学生信息',
                                type: 1,
                                skin: 'show_ui', //样式类名
                                maxWidth: 800,
                                maxHeight: 400,
                                closeBtn: 1, //不显示关闭按钮
                                anim: 2,
                                shadeClose: true, //开启遮罩关闭
                                content: html,
                                cancel: function (index, layero) {
                                    $('#show').html('')
                                }
                            });
                        })
                    })
            })

            //删除按钮点击事件
            $('tbody').on('click', '#del_btn', function () {
                // let div = $("<div class='mask'/>")
                //在父级窗口里面打开蒙版
                // $("body", window.parent.document).append(div)
                // $("body").append(div)

                // console.log($(this).attr("data-no"));  //获取data-no属性对应的值
                // console.log($(this).data("no"));       //获取data-no属性对应的值，特有写法

                //获取学号
                let studentNo = $(this).data("no")
                layer.confirm('确定删除吗?', { icon: 3, title: '提示' },
                    function (index) {
                        $.post('http://www.bingjs.com:81/Student/Delete', {
                            studentNo
                        }, res => {
                            if (res) {
                                layer.msg('删除成功！')
                                getPage()   //调用获取分页的方法
                                getData(pageIndex, pageSize)    //调用获取数据的方法
                            }
                        })

                        //确定按钮
                        layer.close(index);
                    },
                    function (index) {
                        //取消按钮
                        layer.close(index);
                    });
            })

            //查询按钮点击事件
            $('#search').click(function () {
                getPage()   //调用获取分页的方法
                getData(pageIndex, pageSize)    //调用获取数据的方法
            })

            //获取分页
            function getPage() {
                //读取数据
                $.get('http://www.bingjs.com:81/Student/GetStudentsConditionPages', {
                    studentName: $('#studentName').val().trim(),
                }, data => {
                    // 渲染分页
                    laypage.render({
                        elem: 'pages', //注意，这里的 pages 是 ID，不用加 # 号
                        limit: pageSize,
                        curr: pageIndex,
                        count: data.count,  //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            // console.log(obj.limit); //得到每页显示的条数
                            // first（是否首次，一般用于初始加载的判断）
                            if (!first) {
                                pageIndex = obj.curr
                                console.log(pageIndex);
                                getData(obj.curr, obj.limit)
                            }
                        }
                    });
                })
            }
            getPage()


            //获取数据的方法
            function getData(pageIndex, pageSize) {
                //读取数据
                $.get('http://www.bingjs.com:81/Student/GetStudentsConditionPages', {
                    studentName: $('#studentName').val().trim(),
                    pageIndex,
                    pageSize
                },
                    data => {
                        data.data.forEach(r => r.BornDate = moment(new Date(r.BornDate)).format("YYYY-MM-DD"))
                        // 渲染模版
                        laytpl($('#temp').html()).render(data, function (html) {
                            $('tbody').html(html)
                        })
                    })
            }
            getData(pageIndex, pageSize)
        });

    </script>
</body>

</html>